<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
var events = [];
function logLoadEvent(event) {
  events.push(event.target.id);
}
function reparentAndLogLoadEvent(event) {
  logLoadEvent(event);
  var element = event.target;
  var newParent = element.parentNode.previousSibling.previousSibling;
  newParent.appendChild(element);
}

var t = async_test("'load' event fires on parent of element reparented in onload handler.");

window.onload = function() {
  t.step(function() {
    assert_equals(events.length, 4);
    assert_equals(events[0], "inner1");
    assert_equals(events[1], "image");
    assert_equals(events[2], "inner2");
    assert_equals(events[3], "outer");
  }, 'Verify order and presence of events');
  t.done();
};
</script>
<svg id="outer" onload="logLoadEvent(evt)">
  <svg id="inner1" onload="logLoadEvent(evt)"></svg>
  <svg id="inner2" onload="logLoadEvent(evt)">
    <image id="image" onload="reparentAndLogLoadEvent(evt)"
           xlink:href="resources/red-checker.png" width="10" height="10"/>
  </svg>
</svg>
